<template>
    <div class="rx-history">
        <div class="rx-center" v-for="record in dataSource">
            <div class="node-title">
                <div class="user-name">{{ record.nodeName }}</div>
                <div v-if="record.jumpType" class="node-state" :class="[record.jumpType]">
                    {{ record.jumpTypeName }}
                </div>
                <div class="description-unhand" v-else>
                    {{i18n('currentNode','当前节点')}}
                </div>
            </div>
            <div class="description-head">
                <div class="description-head-portrait"><image src="@/static/male.png"/></div>
                <div class="description-head-user">
                    <div v-if="record.status=='UNHAND'" class="description-head-list">
                        <div v-for="obj_ in record.taskExecutors">
                            {{ obj_.name }}
                        </div>

                    </div>
                    <div v-else>
                        <rx-user-info :user-id="record.handlerId"/>
                    </div>
                </div>
            </div>
                <div style="margin-bottom: 0.5rem">{{ ddI18n('createTime', '开始时间') }}:{{record.createTime}}</div>
                <div style="margin-bottom: 0.5rem">{{ ddI18n('completeTime', '完成时间') }}:{{record.completeTime}}</div>
            <view v-if="record.child" >
                <template  v-for="childObj in record.child">
                    <div class="description-head">
                        <div class="description-head-portrait">
                            <image  src="@/static/male.png"/>
                        </div>
                        <div>
                            <div v-for="obj_ in childObj.taskExecutors">
                                {{obj_.name}}
                            </div>
                        </div>
                    </div>
                    <div>{{ ddI18n('createTime', '开始时间') }}:{{childObj.createTime}}</div>
                    <div>{{ ddI18n('completeTime', '完成时间') }}:{{childObj.completeTime}}</div>
                </template>

            </view>
            <div v-if="record.transferorName" class="description-common">
                <div>{{i18n('transferorName','转办给了')}}</div>
                <div>{{ record.transferorName }}</div>
            </div>
            <div v-if="record.remark" class="description-common">
                <div>{{i18n('remark','审批意见')}}:</div>
                <div class="description-common-remark">{{ record.remark }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import Api from '@/api/Api.js';
import MForm from '../js/MForm'
import FormBase from "../js/FormBase";

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn';
import RxUserInfo from "@/components/RxUserInfo.vue";
import TokenUtil from "../../../../common/TokenUtil";

dayjs.locale('zh-cn');

export default {
    name: "MHistory",
    components: {RxUserInfo},
    mixins: [MForm, FormBase],
    props:{
        propsInstId:''
    },
    data() {
        return {
            instId: "",
            dataSource: [],
            extMapping: {
                ".doc": "wordBox",
                ".docx": "wordBox",
                ".xls": "excelBox",
                ".xlsx": "excelBox",
                ".txt": "txtBox",
                ".pdf": "pdfBox",
                ".rar": "rarBox",
                ".zip": "zipBox",
            }

        }
    },
    methods: {
        ddI18n(name, text, key) {
            return this.$ti18(name, text, "formLang.history", key);
        },
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        init() {
            if(this.propsInstId){
                this.instId = this.propsInstId;
                this.getCheckHistorys(this.instId);
            }else if (this.contextData && this.contextData.instId && !this.instId) {
                this.instId = this.contextData.instId;
                this.getCheckHistorys(this.instId);
            }
        },
        getRelInsts(his) {
            if (!his.relInsts) {
                return [];
            }
            return his.relInsts;
        },
        getCheckHistorys(instId) {
            if (!instId) {
                return;
            }
            Api.getCheckHistorys(instId).then(res => {
                for (var i = 0; i < res.length; i++) {
                    var obj = res[i];
                    var row = this.handRow(obj);
                    this.dataSource.push(row);
                }
                this.loadUnhand();
            });
        },
        loadUnhand() {
            var listData = [];
            this.dataSource = this.dataSource.filter(res => {
                if (res.status != "UNHAND") {
                    return true
                } else {
                    listData.push(res)
                }
            })
            if(this.dataSource && this.dataSource.length > 0) {
                // 如果最后一个节点为挂起，后续不出当前节点
                if (this.dataSource[this.dataSource.length - 1].jumpType === 'PENDING') {
                    return;
                }
            }
            let newArr = []
            let teamArr = []
            for (let i = 0; i < listData.length; i++) {
                if (!teamArr.includes(listData[i]['actTaskId'])) {
                    newArr.push(listData[i])
                    teamArr.push(listData[i]['actTaskId'])
                } else {
                    for (let n = 0; n < newArr.length; n++) {
                        if (newArr[n]['actTaskId'] == listData[i]['actTaskId']) {
                            if (newArr[n].child) {
                                newArr[n].child.push(listData[i])
                            } else {
                                var a = [];
                                a.push(listData[i])
                                this.$set(newArr[n], 'child', a)
                            }
                            break
                        }
                    }
                }
            }
            for (let j = 0; j < newArr.length; j++) {
                this.dataSource.push(newArr[j])
            }
        },
        handRow(obj) {
            var duration = this.getDuration(obj.duration || 0);
            var relInsts = [];
            if (obj.relInsts) {
                relInsts = JSON.parse(obj.relInsts);
            }
            var row = {
                createTime: obj.createTime,
                completeTime: obj.completeTime,
                duration: duration,
                nodeName: obj.nodeName,
                handlerId: obj.handlerId,
                status: obj.checkStatus,
                jumpTypeName: obj.jumpTypeName,
                remark: obj.remark,
                opFiles: obj.opFiles,
                relInsts: relInsts,
                taskExecutors: obj.taskExecutors,
                jumpType: obj.jumpType,
                actTaskId: obj.actTaskId,
                transferorName:obj.transferorName,
            };
            if (obj.checkStatus == "TRANS") {
                row.userNames = this.handUsers(obj.linkUpUsers);
            }
            return row;
        },
        handUsers(users) {
            if (!users) {
                return "";
            }
            var userNames = users.map(item => {
                return item.name;
            })
            return userNames.join(",");
        },
        donwload(file) {//下载附件
            var accessToken = TokenUtil.getToken();
            const url = '/api/api-system/system/core/sysFile/download/' + file.fileId + '?accessToken=' + accessToken;
            window.open(url);
        },
        showInst(item) {
            /**
             * {id:"",name:""}
             */
            this.$bus.emit("bpmInstDetailEvent", item);
        },
        showLabel() {
            if (this.isTable && !['window', 'block'].includes(this.subFormType) && this.formVm.formType === 'preview') {
                return false;
            }
            let show = this.itemConfig.options.labelHide == undefined ? false : this.itemConfig.options.labelHide;
            return !show;
        },
        getDuration(time) {
            var days = time / 1000 / 60 / 60 / 24;
            var daysRound = Math.floor(days);
            var hours = time / 1000 / 60 / 60 - (24 * daysRound);
            var hoursRound = Math.floor(hours);
            var minutes = time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
            var minutesRound = Math.floor(minutes);
            var seconds = Math.floor(time / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound));

            if (daysRound >= 1) {
                return daysRound + this.i18n('daysRound','天') + hoursRound + this.i18n('hoursRound','时') + minutesRound + this.i18n('minutesRound','分') + seconds +this.i18n('seconds','秒');
            } else if (hoursRound >= 1) {
                return hoursRound + this.i18n('hoursRound','时') + minutesRound + this.i18n('minutesRound','分') + seconds + seconds +this.i18n('seconds','秒');
            } else if (minutesRound >= 1) {
                return minutesRound + this.i18n('minutesRound','分') + seconds + seconds +this.i18n('seconds','秒');
            }
            return seconds + seconds +this.i18n('seconds','秒');
        },

    },
    watch: {
        contextData: {
            handler(v) {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    }
}
</script>

<style scoped>
.rx-center{
    margin-bottom: 1rem;
}
.node-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-name {
    color: #333;
}
.description-head-list{
    display: flex;
    grid-gap: 0.5rem;
    flex-wrap: wrap;
}
.description-head {
    margin: 0;
    padding: 6px 0;
    display: flex;
    align-items: center;
}

.user-row .description-head {
    display: flex;
    align-content: center;
    padding: 4px 6px;
    margin: 0;
}

.description-head-portrait {
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
}

.description-head-portrait image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}


.description-head-user {
    color: #46494d;
    margin-top: 2px;
    flex: 1;
}

.description-common {
    display: flex;
    font-size: 0.7rem !important;
    color: #303030;
    line-height: 1.5rem;
}

.description-common div:nth-child(1) {
    margin-right: 5px;
    width: 4rem;
    text-align: right;
}
.description-common-remark{
    background-color: #f0f4f9;
    border-radius: 5px;
    padding: .2rem .5rem .2rem .5rem;
    color: #95a5b8;
    flex: 1;
}
.description-unhand{
    padding: 0 6px;
    min-width: 70px;
    height: 22px;
    border-radius: 2px;
    border: solid 1px #6683ef;
    font-size: 12px;
    color: #6683ef;
    text-align: center;
    line-height: 22px;
}
.AGREE {
    font-weight: bold;
    color: green;
}

.BACK, .BACK_SPEC, .BACK_TO_STARTOR {
    font-weight: bold;
    color: red;
}

.SKIP {
    color: red;
}

.node-state {
    font-weight: bold;
}
</style>
